<template>
  <view class="charts-box">
    <qiun-data-charts 
      type="column"
      :opts="opts"
      :chartData="chartData"
	  :ontouch="true"
    />
  </view>
</template>


<script>
// import uCharts from 'u-charts';

export default {
  data() {
    return {
      chartData: {
        categories: [],  // 存放 x 轴帖子ID
        series: []       // 存放柱状图数据
      },
      opts: {
        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
        padding: [15, 15, 0, 5],
        touchMoveLimit: 24,
        enableScroll: true,
        legend: {},
        xAxis: {
          disableGrid: true,
		  scrollShow: true,
		  itemCount: 4
        },
        yAxis: {
          data: [{ min: 0 }]
        },
        extra: {
          column: {
            type: "stack",
            width: 30,
            activeBgColor: "#000000",
            activeBgOpacity: 0.08,
            labelPosition: "center"
          }
        }
      }
    };
  },
  created() {
    this.getServerData();
  },
  methods: {
    getServerData() {
		
      const url = '/api/habit_former/admin/dashboard/post_collect_ranking?rankSize=4';
      uni.request({
        url: url,
        method: 'GET',
        success: (res) => {
		// console.log(res);		
          if (res.data.code === 200) {
            const data = res.data.data;

            // 处理从服务器获取的数据，设置 categories 和 series
            let categories = data.map(item => item.posterID.toString());  // 将帖子ID转为字符串作为 x 轴数据
            let series = [
              {
                name: "帖子对应的点赞数",
                data: data.map(item => item.collectsCount)  // 获取点赞数作为柱状图数据
              }
            ];

            // 更新图表数据
            this.chartData = {
              categories: categories,
              series: series
            };
          } else {
            console.error('Failed to fetch data:', res.data);
          }
        },
        fail: (err) => {
          console.error('Failed to fetch data:', err);
        },
      });
    }
  }
};
</script>

<style scoped>
.charts-box {
  width: 100%;
  height: 300px;
}
</style>